<template>
  <div class="goodDetail">
    <van-sticky class="nav">
      <!-- 顶部导航 -->
      <van-nav-bar class="topNaV" @click-left="onClickLeft">
        <template #title>
          <p class="title">产品详情</p>
        </template>
        <template #left>
          <van-icon name="arrow-left" color="#666666" />
          <p class="left">返回</p>
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" class="swipe-container">
      <van-swipe-item
        v-for="(image, index) in data.gallery"
        :key="index"
        class="swipe-item"
      >
        <img lazy-load :src="image.img_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- 无忧退货 -->
    <div class="commit">
      <p>
        <span class="round"></span>
        30天无忧退货
      </p>
      <p>
        <span class="round"></span>
        48小时快速退款
      </p>
      <p>
        <span class="round"></span>
        满88元免邮费
      </p>
    </div>
    <div class="info">
      <div class="info-card">
        <p class="info-name">{{ info.name }}</p>
        <p class="info-desc">{{ info.goods_brief }}</p>
        <p class="info-price">{{ info.retail_price }}</p>
        <van-divider class="line" />

        <van-cell is-link class="choice">
          <div>
            <p style="text-align: left;">商品展示</p>
            <img src="@/assets/icons/选中.png" alt="" />
          </div>
        </van-cell>
      </div>
    </div>
    <van-grid :border="false" :column-num="1" class="attribute">
      <div>
        <h2>商品参数</h2>
        <div v-for="item in data.attribute" :key="item.name" class="attribute-list">
          <p class="p1">{{ item.name }}</p>
          <p class="p2">
            <span>{{ item.value }}</span>
          </p>
        </div>
      </div>
    </van-grid>
    <div class="box">
      <div v-html="info.goods_desc"></div>
    </div>
    <div class="issue">
      <div class="box">
        <h2>常见问题</h2>
        <div v-for="item in issue" :key="item.id">
          <p class="p3">
            <span></span>
            {{ item.question }}
          </p>
          <p class="p4">{{ item.answer }}</p>
        </div>
      </div>
    </div>
    <div class="productList">
      <div>
        <h2>大家都在看</h2>
      </div>

      <div class="goods">
        <div
          v-for="item in productList"
          :key="item.id"
          class="good-list"
          @click="goDetail(item.id)"
        >
          <img :src="item.list_pic_url" alt="" class="good-img" />
          <p class="good-name">{{ item.name }}</p>
          <p class="good-price">{{ item.retail_price }}起</p>
        </div>
      </div>
    </div>
    <!-- 加入购物车 -->
    <div class="addCart">
      <div class="collect">
        <img @click="shoucang(info.id)" class="collect-img" src="@/assets/icons/收藏.png" alt="" />
      </div>
      <div class="cart">
        <van-badge :content="5">
          <img @click="gocart" class="cart-img" src="@/assets/icons/购物车.png" alt="" />
        </van-badge>
      </div>
      <div @click="addcart(info.id)" class="btn-cart">加入购物车</div>
      <div @click="gopay" class="btn-pay">立即购买</div>
    </div>
    <!-- <van-goods-action closeable class="addcart">
      <div class="box1" @click="shoucang(info.id)">
        <img src="@/assets/imgs/icons/收藏.png" alt="" />
      </div>
      <div class="box2" @click="gocart">
        <van-badge :content="number">
          <img src="@/assets/imgs/icons/购物车.png" alt="" />
        </van-badge>
      </div>
      <div class="cart" @click="addcart(info.id)">加入购物车</div>
      <div @click="gopay" class="buy">立即购买</div>
    </van-goods-action> -->
    <van-popup v-model:show="show" position="bottom" class="popup">
      <div class="boxbox">
        <div class="boxa">
          <img :src="info.list_pic_url" alt="" />
        </div>
        <div class="boxb">
          <p class="b1">
            价格: <span>￥{{ info.retail_price }}</span>
          </p>
          <p class="b2">商品数量:{{ info.goods_number }}</p>
          <div class="b3">
            <van-stepper v-model="value" />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {
  detailaction,
  addcollect,
  addCart,
  submitAction,
  cartDelete
} from '@/api/index'
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const data = ref({})
const show = ref(false)
const info = ref({})
const issue = ref([])
const productList = ref([])
const number = ref(0)
const value = ref(1)
const router = useRouter()
const route = useRoute()
const store = useStore()
console.log(store.state.openId)
// 获取商品详情
detailaction({ id: route.params.id, openId: store.state.openId }).then(res => {
  data.value = res
  info.value = res.info
  issue.value = res.issue
  productList.value = res.productList
})
// 监听路由变化 更新页面
watch(
  () =>
    route.path, (newVal, oldVal) => {
    console.log(newVal, oldVal)
    router.go(0)
  }
)
// 方法
const onClickLeft = () => {
  router.back()
}
const goDetail = (id) => {
  router.push({ name: 'categoryDetail', params: { id: id } })
}
const shoucang = (id) => {
  addcollect({ goodsId: id, openId: store.state.openId })
}
const gocart = () => {
  router.push('/cart')
}
const addcart = (id) => {
  if (!show.value) {
    show.value = true
  } else {
    // 添加到购物车
    addCart({
      goodsId: id,
      number: number.value,
      openId: store.state.openId
    })
  }
}
const gopay = () => {
  if (!show.value) {
    show.value = true
  } else {
    cartDelete({
      id: info.value.id
    })
    const obj = {
      allPrise: info.value.goods_desc,
      goodsId: info.value.id,
      openId: store.state.openId
    }
    submitAction(obj)
    router.push({ name: 'pay' })
  }
}
if (route === '') {
  gopay()
  addcart()
  gocart()
  shoucang()
}
</script>
<script>

export default {
  name: 'categoryDetail'
}
</script>

<style>
img {
  width: 750px;
}
.content {
  padding: 16px 16px 160px;
}
</style>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.goodDetail {
  background-color: #f8f8f8;
  .nav {
    .topNav {
      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .swipe-container {
    width: 750px;
    height: 691px;
    .swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .commit {
    display: flex;
    width: 750px;
    height: 100px;
    justify-content: space-evenly;
    align-items: center;
    background-color: #000;
    color: #fff;
    p {
      height: 33px;
      line-height: 33px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        border: 3px solid rgba(183, 166, 115, 1);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 14px;
      }
    }
  }
  .info {
    width: 750px;
    background-color: #f8f8f8;
    margin-top: 20px;
    overflow: hidden;
    .info-card {
      width: 710px;
      margin: 0 auto;
      background-color: #ffffff;

      overflow: hidden;
      .info-name {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin-left: 30px;
        margin-top: 34px;
        height: 53px;
        line-height: 53px;
        text-align: left;
      }
      .info-desc {
        font-size: 26px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
        margin-left: 30px;
        margin-top: 7px;
        height: 37px;
        line-height: 37px;
        text-align: left;
      }
      .info-price {
        font-size: 34px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 500;
        margin-left: 30px;
        margin-top: 12px;
        height: 48px;
        line-height: 48px;
        text-align: left;
        margin-bottom: 46px;
      }
      .line {
        width: 640px;
        margin: 0 auto;
      }
      .choice {
        margin-top: 25px;
        margin-left: 30px;
        margin-bottom: 24px;
        div {
          position: relative;

          img {
            position: absolute;
            top: 0;
            right: 35px;
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
  .attribute {
    width: 750px;
    background-color: #f8f8f8;
    margin-top: 20px;
    overflow: hidden;
    div {
      width: 710px;
      margin: 0 auto;
      overflow: hidden;
      margin-bottom: 37px;
      background-color: #ffffff;
      h2 {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        height: 53px;
        line-height: 53px;
        margin-top: 40px;
        margin-left: 34px;
        margin-bottom: 24px;
        text-align: left;
      }
      .attribute-list {
        margin-top: 10px;
        height: 68px;
        overflow: hidden;
        margin-bottom: 20px;
        p {
          float: left;
          font-size: 26px;
          letter-spacing: 0;
          font-weight: 400;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .p1 {
          color: #666666;
          margin-left: 34px;
          height: 68px;
          line-height: 68px;
        }
        .p2 {
          float: right;
          margin-right: 34px;
          color: #333333;
          width: 507px;
          height: 66px;
          line-height: 66px;
          background: #f8f8f8;
          border: 1px solid rgba(223, 223, 223, 1);
          span {
            margin-left: 77px;
          }
        }
      }
    }
  }
  .box {
    margin-top: 80px;
    margin-bottom: 50px;
    background-color: #ffffff;
  }
  .issue {
    width: 750px;
    //background-color: #f8f8f8;
    margin-top: 20px;

    .box {
      width: 710px;
      background-color: #ffffff;
      margin: 0 auto 60px;
      margin-bottom: 60px;
      overflow: hidden;
      h2 {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        height: 53px;
        line-height: 53px;
        margin-top: 40px;
        margin-bottom: 40px;
        overflow: hidden;
      }
      div {
        overflow: hidden;
        vertical-align: middle;
        p {
          font-size: 26px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
          text-align: left;
        }
        .p3 {
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          line-height: 42px;
          vertical-align: middle;
          margin-top: 40px;
          span {
            display: inline-block;
            vertical-align: middle;
            background: #9e4242;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            margin-left: 38px;
            margin-right: 14px;
          }
        }
        .p4 {
          margin-top: 15px;
          line-height: 37px;
          width: 592px;
          margin-left: 60px;
        }
      }
    }
  }
  .productList {
    div {
      h2 {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        line-height: 53px;
        height: 53px;
        margin: 46px auto 36px;
        overflow: hidden;
      }
    }
    .goods {
      display: flex;
      flex-wrap: wrap;
      width: 710px;
      margin: 0 auto;
      overflow: hidden;
      background-color: #ffffff;

      .good-list {
        width: 350px;
        display: flex;

        flex-wrap: wrap;
        justify-content: space-between;
        .good-img {
          width: 350px;
          height: 350px;
        }
        .good-name {
          width: 350px;
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          margin-top: 17px;
          height: 37px;
          line-height: 37px;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .good-price {
          font-size: 26px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          height: 37px;
          line-height: 37px;
          margin-top: 8px;
          margin-bottom: 44px;
          text-align: left;
        }
      }
      .good-list:nth-child(2n) {
        margin-left: 10px;
      }
    }
  }
  .addCart {
    width: 750px;
    height: 130px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    .collect{
      margin-left: 62px;
      .collect-img {
        width: 58px;
        height: 58px;
      }
    }
    .cart{
      margin-left: 76px;
      margin-right: 115px;
      .cart-img {
        width: 58px;
        height: 58px;
      }
    }
    .btn-cart {
      background: #cea62a;
      border-radius: 35.75px 0px 0px 35.75px;
      font-size: 26px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      width: 190px;
      height: 72px;
      line-height: 72px;
      text-align: center;
    }
    .btn-pay {
      text-align: center;
      background: #a04c19;
      border-radius: 0px 35.75px 35.75px 0px;
      font-size: 26px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      width: 190px;
      height: 72px;
      line-height: 72px;
      margin-right: 20px;
    }
  }
  .popup {
    width: 750px;
    height: 340px;
    bottom: 130px;
    .boxbox {
      display: flex;
      margin-bottom: 130px;
      .boxa {
        width: 316px;
        height: 340px;
        display: flex;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        img {
          width: 196px;
          height: 196px;
        }
      }
    }
    .boxb {
      text-align: left;
      .b1 {
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        height: 42px;
        line-height: 42px;
        margin-top: 70px;
        span {
          font-size: 34px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 500;
          line-height: 42px;
        }
      }
      .b2 {
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        height: 42px;
        line-height: 42px;
        margin-top: 32px;
      }
      .b3 {
        margin-top: 32px;
      }
    }
  }
}
</style>
